<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的使用</title>
  <script src="vue.js"></script>
</head>
<!--
    react,vue中key的作用？：

        1.虚拟DOM中key的作用：
            key是虚拟DOM对象中的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM
            随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较，比较规则如下：
            1.旧虚拟DOM中找到了与新DOM相同的key：
                若虚拟DOM中内容没变，直接使用之前的真实dom
                若虚拟dom中数据发生了改变，则生成新的dom，替换掉之前的真实dom
            2.旧虚拟dom中没找到新虚拟dom中相同的key
                创建新的真实的dom，随后渲染到页面
         2.用index作为key的问题：
                1.若对数据进行：逆序增加，逆序删除等破坏顺序的操作：
                    会产生没有必要的真实dom更新==》页面效果没问题但是效率低
                2.如果结构中还包含输入类的DOM：
                    会产生错误dom更新==>界面出现问题
         3.如何使用key？
                1.最好使用每条数据的唯一标识作为key，比如id，电话号，身份证号等
                2.如果不存在对数据的逆序添加，逆序删除等破坏顺序的行为，仅仅用于渲染列表，
                使用index作为key没问题（默认key为index）
-->
<body>
<div id="root">
    <button @click.once="add">add</button>
    <ul>
        <li>List:</li>
<!--        遍历数组-->
        <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}<input type="text"></li>
        <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li>

    </ul>
</div>
</body>
<script type="text/javascript">
    const  vm = new Vue({
        el:"#root",
        data:{
            persons:[
                {id:'001',name:"张三",age:11},
                {id:'002',name:"张四",age:12},
                {id:'003',name:"张五",age:13},
            ]

        },
        methods:{
            add(){
                const p ={id:'004',name:"lailiu",age:80}
                this.persons.unshift(p)

            }
        }
    })

</script>

</html>